<template>
    <div>
        <Card shadow :padding="16">
            <div class="search-con">
                <Select v-model="roleName" style="width:200px">
                    <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Button type="success" @click="modal1 = true">{{$t('save')}}</Button>
            </div>
            <Table ref="LT" row-key="id" :loading="loading" :height="tableHeight" stripe border :columns="filterColumns" :data="list" @on-select="select">
                <template slot-scope="{ row }" slot="access">
                    <Checkbox v-for="(item) in row.access" color="blue" v-bind:key="$uuid.v1()" >{{ $t(item) }}</Checkbox>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index,row)">{{$t('edit')}}</Button>
                    <Button type="error" size="small" @click="remove(index)">{{$t('delete')}}</Button>
                </template>
            </Table>
            <div style="margin-top: 10px;text-align: right">
                <Page :page-size-opts="[10,20,50,100]" :total="total" @on-change="pageChange" @on-page-size-change="pageSizeChange" size="small" show-elevator show-sizer show-total />
            </div>
        </Card>

        <modal v-model="modal1" :mask-closable="false" title="详情页面">
            <Form>
                <row>
                    <FormItem label="Name" prop="name">
                        <Input placeholder="Enter your name" style="width: 100px;"></Input>
                    </FormItem>
                    <FormItem label="Name2" prop="name2">
                        <Input placeholder="Enter your name" style="width: 100px;"></Input>
                    </FormItem>
                </row>
                <FormItem label="Nam3e" prop="name3">
                    <Input placeholder="Enter your name" style="width: 200px;"></Input>
                </FormItem>
            </Form>
        </modal>
    </div>
</template>




<script>
    import DetailModal from "../../components/detail-modal";
    import ColPopTip from '../../components/col-poptip'
    import { mixin } from '../../mixins/mixin'

    export default {
        name: "sys-author",
        mixins: [mixin],
        components: {DetailModal,ColPopTip},
        data () {
            return {
                modal1: false,
                queryUrl: 'getMenuData',
                roleName: '',
                roleList:[]
            }
        },
        methods:{
            showInfo(){

            },
            ok(){

            },
            show(index,row){
            }
        },
        computed : {
            columns1() {
                return [
                    {type: 'selection', width: 60, align: 'center'},
                    {title: this.$t('menu_name'), key: 'name',tree: true,maxWidth:300},
                    {title: this.$t('menu_access'), slot:'access', key: 'access'}
                ]
            }
        },
        mounted() {
        }
    }
</script>

<style lang="less">


</style>